<template>
  <page-wrap :show-top="false" hide-tab bg-color="#75DFFA" back title=" ">
    <view class="content" :style="'padding-top:' + navHeight + 'px;'">
      <view class="top-content">
        <view class="left-title">
          <view class="nav-title">{{ navTitle }}</view>
          <view class="share-title">{{ shareTitle }}</view>
        </view>
        <image class="right-img" :src="iconImage1"></image>
        <image
          class="float-right-img"
          :src="iconImage2"
          :style="'padding-top:' + floatImageTop + 'px;'"
        ></image>
      </view>
      <view class="bottom-content">
        <u-form :model="form" ref="uForm">
          <u-form-item class="form-item" prop="job" :label-hidden="true">
            <view class="left">
              <image class="form-left-image" :src="jobImage"></image>
              <!-- <text class="form-title" v-if="!isShowSearch && form.job">{{ form.job }}</text>
              <text class="placeholder" v-else >请选择职业</text> -->
              <u-search
                class="library-u-search"
                placeholder="请输入职业"
                color="#222222"
                bg-color="transparent"
                v-model="keyword"
                height="80"
                search-icon=""
                @blur="handleSearchBlur"
                @change="handleSearch"
                @search="handleSearch($event, 'enter')"
                @focus="handleFocus"
                @clear="handleClear"
                maxlength="20"
                :show-action="false"
              ></u-search>
            </view>
            <text class="placeholder" @click="selectJobClick">筛选职业</text>
          </u-form-item>
          <u-form-item class="form-item" prop="city" :label-hidden="true">
            <view class="left" @click="selectCityClick">
              <image class="form-left-image" :src="cityImage"></image>
              <text class="form-title" v-if="form.city">{{ form.city }}</text>
              <text class="placeholder-city" v-else>请选择城市</text>
            </view>

            <text class="placeholder" @click="selectCityClick">选择城市</text>
          </u-form-item>
        </u-form>
        <view class="submit-btn" @click="submit">查询薪酬</view>
      </view>
      <FilterBox
        ref="filterBox"
        :keywordFromParent="keyword"
        @update="handleFilter($event)"
      ></FilterBox>

      <!-- 实时搜索 
        :style="'top:' + topSearchHeight + 'px;'"-->
      <scroll-view
        :scroll-y="true"
        class="searchResult"
        v-if="
          isSearching && keyword && searchResultList.length && isBreakSearch
        "
      >
        <view class="resultList" v-if="searchResultList.length">
          <view
            class="resultItem"
            v-for="(item, index) in searchResultList"
            :key="index"
            @click="handleResultClick(item, 'search')"
          >
            <view class="resultTitle">
              <template v-for="(_item, _index) in item.filterList">
                <text v-if="_item.deep" class="light" :key="_index">{{
                  _item.val
                }}</text>
                <template v-else>{{ _item.val }}</template>
              </template>
              <!-- <view class="flag-major" v-if="item.isMajor">专业</view>
              <view class="flag-job" v-else>职业</view> -->
            </view>
            <view class="resultDesc"
              >{{ item.topName ? item.topName + " - " : ""
              }}{{ item.parentName ? item.parentName : "" }}</view
            >
          </view>
        </view>
      </scroll-view>
      <!-- v-if="isSearching && !searchResultList.length && isShowSearch" :style="'top:' + topSearchHeight + 'rpx;'"-->
      <view
        class="noneResult"
        v-if="isSearching && !searchResultList.length && isBreakSearch"
      >
        <image :src="emptyImg" class="empty_image"></image>
        <view class="empty-title">
          暂无精准匹配职业，请重新输入职业关键字
        </view>
      </view>
    </view>
    <!-- 地点选择 -->
    <regionSelector
      v-if="showRegionSelect"
      :showRegionSelect.sync="showRegionSelect"
      @regionChange="regionChange"
    />
  </page-wrap>
</template>
<script>
// 这个页面有两个！！！如果你要修改这个页面记得搜索出另外一个进行修改
import { matchPositionListNew } from "@/api/modules/career";
import FilterBox from "./components/filterBox.vue";
import ShareMixin from "@/mixins/share";
import regionSelector from "./components/regionSelector";

export default {
  mixins: [ShareMixin],
  components: {
    FilterBox,
    regionSelector,
  },
  data() {
    return {
      navTitle: "薪酬查询",
      shareTitle: "解析职业市场薪酬 评测收入水平",
      navHeight: getApp().globalData.navHeight,
      topSearchHeight: 340,
      floatImageTop: 10,
      iconImage1:
        this.$imgBaseSelf + "career/positionDictionary/salary_bg_down.png",
      iconImage2:
        this.$imgBaseSelf + "career/positionDictionary/salary_bg_up.png",
      sharePath: "/pagesSub/careerGrow/salarySearch/index",
      jobImage:
        this.$imgBaseSelf + "career/positionDictionary/salary_job_icon.png",
      cityImage:
        this.$imgBaseSelf + "career/positionDictionary/salary_city_icon.png",
      form: {
        job: "",
        city: "全国",
      },
      rules: {
        job: [
          {
            required: true,
            message: "请选择职业",
            trigger: ["blur", "change"],
          },
        ],
        city: [
          {
            required: true,
            message: "请选择城市",
            trigger: ["blur", "change"],
          },
        ],
      },
      jobParams: {},
      cityParams: {
        label: "全国",
        value: "100000",
      },
      keyword: "",
      isSearching: false,
      searchResultList: [],
      isBreakSearch: false, //是否展示搜索框
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      showRegionSelect: false,
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad() {},
  created() {},
  mounted() {},
  methods: {
    selectJobClick() {
      console.log("------selectJobClick-------");
      this.$refs.filterBox.init();
      this.regionShow = false;
    },
    selectCityClick() {
      console.log("------selectCityClick-------");
      this.showRegionSelect = true;
      console.log("showRegionSelect", this.showRegionSelect);
      this.$refs.filterBox.handleClose();
    },
    handleFilter(data) {
      this.jobParams = data;
      console.log("---------->handleFilter(data)", data, this.jobParams);
      this.form.job = data.tagTitle;
      this.keyword = this.jobParams.tagTitle;
      this.isBreakSearch = false;
      this.searchResultList = [];
      this.isSearching = false;
    },
    regionChange(region) {
      console.log("--------regionChange------->", region);
      this.showRegionSelect = false;

      this.form.city = region.label;
      this.cityParams = region;
    },
    submit() {
      //进入薪酬详情
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          let tagTitle = this.jobParams.tagTitle;
          let positionId = this.jobParams.positionId;
          let parentTitle = this.jobParams.parentTitle;
          let topTitle = this.jobParams.topTitle;
          let pageName = this.jobParams.pageName || "123";
          let regionId = this.cityParams.value;
          let regionName = this.cityParams.label;
          let params = `positionName=${tagTitle}&positionId=${positionId}&regionId=${regionId}&regionName=${regionName}&parentTitle=${parentTitle}&topTitle=${topTitle}`;
          console.log("------params--------》验证通过", params);
          uni.navigateTo({
            url: `/pagesSub/careerNew/positionDictionary/careerSalaryReport/index?${params}`,
          });
        } else {
          console.log("验证失败");
        }
      });
    },
    /* 失去焦点  */
    handleSearchBlur() {
      // this.searchResultList = [];
      // this.isSearching = false;
      // this.isShowSearch = false;
      // this.isBreakSearch = false; //可以隐藏搜索了
      // console.log("//handleSearchBlur -------》    false");
    },
    handleFocus() {
      console.log("//handleFocus -------》    true");
      this.isBreakSearch = true; //可以展示搜索了
    },
    handleClear() {
      this.form.job = ""; //需要清空选择
    },
    handleSearch(e, tag) {
      console.log("//isSearching -------》", e, tag);
      if (!e) {
        console.log("//isSearching -------》    false");
        this.isSearching = false;
        return;
      }
      if (!this.isBreakSearch) {
        console.log("//isBreakSearch ----isBreakSearch---》", e, tag);
        this.isBreakSearch = true; //可以展示搜索了
        return;
      }
      this.form.job = ""; //需要清空选择
      this.isBreakSearch = true; //可以展示搜索了
      const params = { matchName: e, pageNo: 1, pageSize: 999 };
      matchPositionListNew(params)
        .then((res) => {
          console.log("---------->matchPositionListNew", res);
          if (res.code == 200) {
            this.isSearching = true;
            const list = res.data.map((item, index) => {
              return this.changeText(item);
            });
            this.searchResultList = list;
          } else {
          }
        })
        .finally(() => {});
    },
    changeText(item) {
      return this.filterHighlight(item, this.keyword);
    },
    /**
     * 关键字高亮处理
     * @param { String } text - 文本
     * @param { String } key - 关键字
     */
    filterHighlight(item, key) {
      let textList = item.positionName.split("");
      let keyList = key.split("");
      let list = [];
      for (let i = 0; i < textList.length; i++) {
        let obj = {
          deep: false,
          val: textList[i],
        };
        list.push(obj);
      }
      for (let k = 0; k < keyList.length; k++) {
        list.forEach((_item) => {
          if (
            _item.val === keyList[k] ||
            _item.val.toLowerCase() === keyList[k].toLowerCase()
          ) {
            _item.deep = true;
          }
        });
      }

      item.filterList = list;
      return item;
    },
    handleResultClick(item, tag) {
      this.searchResultList = [];
      this.isSearching = false;
      this.jobParams.tagTitle = item.positionName;
      this.jobParams.positionId = item.ylPositionId;
      this.jobParams.parentTitle = item.parentName;
      this.jobParams.topTitle = item.topName;
      this.keyword = this.jobParams.tagTitle;
      console.log("---------->handleResultClick", item, this.jobParams);
      this.form.job = this.jobParams.tagTitle;
      this.isBreakSearch = false; //可以隐藏搜索了
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background-image: url($img-base + "career/positionDictionary/career_search_bg.png");
  background-size: 100% 100%;
  height: 85vh;
  background-repeat: no-repeat;
  overflow: hidden;

  .top-content {
    margin-top: 120rpx;
    padding: 0rpx 0rpx 0rpx 32rpx;
    display: flex;
    justify-content: space-between;

    .left-title {
      margin-left: 8rpx;

      .nav-title {
        font-size: 48rpx;
        font-weight: 900;
        color: #000;
      }

      .share-title {
        font-size: 28rpx;
        color: #555;
      }
    }

    .right-img {
      margin-left: 20rpx;
      width: 236rpx;
      height: 270rpx;
    }

    .float-right-img {
      position: absolute;
      right: 0rpx;
      width: 236rpx;
      height: 270rpx;
      z-index: 1;
    }
  }

  .bottom-content {
    margin: -30rpx 32rpx 32rpx 32rpx;
    padding: 32rpx;
    // padding: 32rpx;
    // background: linear-gradient(180deg, #f5faff 60%, #e2efff 60%);
    background: linear-gradient(
      179deg,
      rgba(245, 250, 255, 1) 0%,
      rgba(226, 239, 255, 0.6) 100%
    );
    border: 2rpx solid #cee7f5;
    border-radius: 20rpx;

    .submit-btn {
      margin: 50rpx 0rpx 14rpx 0rpx;
      background-color: #ff711e;
      border-radius: 12rpx;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
      text-align: center;
      height: 90rpx;
      line-height: 90rpx;
    }
  }

  .float-right-img {
    width: 236rpx;
    height: 270rpx;
    z-index: 1;
  }
}

.btn-group {
  padding: 0 24rpx;
  line-height: 102rpx;

  .cancel,
  .confirm {
    padding: 0 16rpx;
  }
}

::v-deep .u-form-item--right__content__slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62rpx;

  .left {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    width: 80%; /*  */
  }

  .form-left-image {
    padding-right: 20rpx;
    width: 40rpx;
    height: 40rpx;
  }

  .form-title {
    color: #222;
    padding-left: 28rpx;
  }

  .placeholder {
    line-height: 40rpx;
    color: #909399;
  }

  .placeholder-city {
    line-height: 40rpx;
    color: #909399;
    padding-left: 28rpx;
  }
}

.library-u-search {
  flex: 1;
  width: 343rpx;
  height: 72rpx;
}

.searchResult {
  margin-top: -326rpx;
  width: 683rpx;
  background-color: #fff;
  bottom: 68rpx;
  overflow: scroll;
  align-self: center;
  border-radius: 0rpx 0rpx 8rpx 8rpx;
  z-index: 2;
  height: calc(100vh - 260rpx);

  .resultList {
    overflow: scroll;
    padding-bottom: 48rpx;

    .resultItem {
      padding: 36rpx 32rpx;
      border-bottom: 1px solid #f5f5f5;

      &:last-of-type {
        border-bottom: 0;
      }

      .resultTitle {
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 40rpx;
        margin-bottom: 16rpx;
        display: flex;
        flex-direction: row;
        align-items: center;

        .flag-job,
        .flag-major {
          width: 52rpx;
          height: 30rpx;
          border-radius: 6rpx;
          font-size: 20rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          margin-left: 8rpx;
        }

        .flag-job {
          background: #effff5;
          border: 1rpx solid #41b16b;
          color: #2e9f58;
        }

        .flag-major {
          background: rgba(255, 119, 49, 0.05);
          border: 1rpx solid #ff836c;
          color: #fa7259;
        }

        .light {
          color: #f75a3e;
        }
      }

      .resultDesc {
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #888888;
        line-height: 40rpx;
      }
    }
  }
}

.noneResult {
  display: block;
  margin-top: -326rpx;
  width: 683rpx;
  background-color: #fff;
  bottom: 68rpx;
  overflow: scroll;
  align-self: center;
  border-radius: 0rpx 0rpx 8rpx 8rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  z-index: 2;

  .empty_image {
    width: 400rpx;
    height: 400rpx;
    margin: auto;
  }

  .empty-title {
    color: #bfbfbf;
    line-height: 40rpx;
    text-align: center;
    margin-bottom: 100rpx;
  }
}
</style>
